<template>
    <div class="login-container">
        <el-card style="max-width: 480px">
            <el-form class="login-form" label-position="left" @submit.prevent="handleLogin">
                <h3 class="title">登录</h3>
                <el-form-item>
                    <span class="svg-container">
                        <i class="el-icon-user"></i>
                    </span>
                    <el-input v-model="loginData.UserName" name="username" type="text" placeholder="username" @keyup.enter="handleLogin" />
                </el-form-item>
                <el-form-item prop="password">
                    <span class="svg-container">
                        <i class="el-icon-lock"></i>
                    </span>
                    <el-input v-model="loginData.Password" name="password" type="password" auto-complete="on"
                        placeholder="password" @keyup.enter="handleLogin" />
                </el-form-item>
                <el-form-item>
                    <el-button :loading="isLoading" type="primary" style="width:100%;" native-type="submit">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import api from '../../api'
import router from '../../router/index'
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

const store = useStore();


const loginData = reactive({
    UserName: 'admin',
    Password: ''
})
var isLoading = ref(false)

var handleLogin = async () => {
    console.log('loginForm', loginData)
    if (loginData.Password.length == 0) {
        ElMessage.error("请输入密码")
        return
    }
    isLoading.value = true
    var res = await api.post('User/Login', loginData)
    isLoading.value = false
    if (res && res.Code == 200) {
        ElMessage.success('登录成功')

        // localStorage.setItem('token', res.Data.token)
        // localStorage.setItem('userName', res.Data.userName)
        // localStorage.setItem('userId', res.Data.userId)
        console.log('set username')
        // let userInfo={
        //     token:res.Data.token,
        //     userName:res.
        // }
        store.dispatch('updateUserInfo', res.Data);

        let beforeLoginPath = localStorage.getItem('beforeLoginPath')
        if (beforeLoginPath) {
            router.push(beforeLoginPath)
        }
        else {
            router.push('/')
        }
    }
}

</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #f0f0f0;
}

.login-form {
    position: relative;
    width: 300px;
    padding: 10px 35px 0;
    margin: 0 auto;
    overflow: hidden;
}

.svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
}
</style>